<!--
 * 用户缴费信息
 *
 * @author Jessica
 * Qdate 2025/10/24
-->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
        <i class="iconfont icon-stall-fee-menu" style="margin: 5px; font-size: 22px">
          缴费信息
        </i ></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="left">
            <div class="top">
              <el-row>
                <el-col :span="24" style="text-align: left">
                  <i class="iconfont icon-stall-fee-menu"
                     style="font-size: 32px"
                  > 账户余额
                  </i>
                </el-col>
              </el-row>
              <div class="count" v-if="userInfo.money">
                <span class="num">￥</span>
                <span class="num">{{
                    userInfo.money.toFixed(2)
                  }}</span>
              </div>
              <div class="recharge-section">
                <el-button
                    class="pay-btn"
                    style="font-size: 22px"
                    type="primary"
                    @click="toPay"
                ><i
                    class="iconfont icon-add-button"
                    style="font-size: 22px"
                ></i>
                  立即充值</el-button
                >
              </div>
            </div>
          </div>
        </el-col>
        <hr />
        <el-col :span="24">
          <div class="bottom">
            <el-row>
              <el-col :span="24" style="text-align: left">
                <i class="iconfont icon-wait-fee"
                   style="font-size: 32px; font-weight: 600"
                > 待缴费</i>
              </el-col>
            </el-row>

            <el-row class="table-header">
              <el-col :span="5" class="header-cell"> 区域 </el-col>
              <el-col :span="4" class="header-cell"> 车位号 </el-col>
              <el-col :span="5" class="header-cell"> 停车时长 </el-col>
              <el-col :span="5" class="header-cell"> 待缴金额 </el-col>
              <el-col :span="5" class="header-cell"> 操作 </el-col>
            </el-row>
            <el-row v-for="res in dRes" :key="res.id" class="table-row">
              <el-col :span="5" class="data-cell">
                                <span class="area">{{
                                    res.stall.stallArea
                                  }}</span>
              </el-col>
              <el-col :span="4" class="data-cell">
                                <span class="stall-num">{{
                                    res.stall.stallNum
                                  }}</span>
              </el-col>
              <el-col :span="5" class="data-cell">
                                <span class="parking-duration">
                                    {{ getParkingDuration(res) }}
                                </span>
              </el-col>
              <el-col :span="5" class="data-cell">
                                <span class="pending-amount">
                                    ￥{{ feeChange(res).toFixed(2) }}
                                </span>
              </el-col>
              <el-col :span="5" class="data-cell">
                <el-button
                    class="pay-button"
                    type="success"
                    size="small"
                    @click="payStall(res)"
                ><i
                    class="iconfont icon-stall-fee-menu"
                ></i
                > 缴费</el-button
                >
              </el-col>
            </el-row>
            <div v-if="dRes.length == 0" class="no-res-small">
              没有相关记录
            </div>
          </div>
        </el-col>
        <hr />
        <el-col :span="24">
          <div class="right">
            <el-row>
              <el-col :span="24" style="text-align: left">
                <i
                    class="iconfont icon-wait-fee"
                    style="font-size: 32px; font-weight: 600"
                >
                  缴费记录</i
                >
              </el-col>
            </el-row>
            <el-row class="table-header">
              <el-col :span="6" class="header-cell"> 区域 </el-col>
              <el-col :span="4" class="header-cell"> 车位号 </el-col>
              <el-col :span="8" class="header-cell"> 缴费时间 </el-col>
              <el-col :span="6" class="header-cell"> 费用 </el-col>
            </el-row>
            <el-row v-for="item in allStallRes" :key="item.id" v-if="item.money != undefined && item.money != null" class="table-row">
              <el-col :span="6" class="data-cell">
                                <span class="area">{{
                                    item.stall.stallArea
                                  }}</span>
              </el-col>
              <el-col :span="4" class="data-cell">
                                <span class="stall-num">{{
                                    item.stall.stallNum
                                  }}</span>
              </el-col>
              <el-col :span="8" class="data-cell">
                                <span class="payment-time">{{
                                    formatPaymentTime(item.createTime)
                                  }}</span>
              </el-col>
              <el-col :span="6" class="data-cell">
                <span class="money">缴费：{{ item.money.toFixed(2) }}元</span>
              </el-col>
            </el-row>
            <div v-if="getPaidRecords().length == 0" class="no-res-small">
              没有缴费记录
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
        title="充值"
        :visible.sync="payShow"
        width="500px"
        center
        @close="payClose"
    >
      <!-- 内容主题区域 -->
      <el-input
          v-model.number="payMoney"
          @blur="checkMoney"
          placeholder="充值金额"
          style="width: 300px"
      ></el-input>
      <br />
      <span class="pay-msg" v-if="msgShow">{{ payMsg }}</span>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="payClose">取 消</el-button> -->
                <el-button type="primary" @click="payClick">确认充值</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      allStallRes: [],
      userInfo: {},
      payShow: false,
      payMoney: "",
      payMsg: "",
      msgShow: false,
      dRes: [],
    };
  },
  methods: {
    getAllStallRes(uid) {
      axios.get("/api/stall/listUserStallRes?person=" + uid).then((res) => {
        this.allStallRes = res.data.data;
      });
    },
    getUserInfo(uid) {
      axios.get("/api/user/getUserByUid?uid=" + uid).then((res) => {
        this.userInfo = res.data.data;
        if (this.userInfo.username) {
          this.getAllStallRes(this.userInfo.username);
          this.getUserNoPay(this.userInfo.username);
        }
      });
    },
    getUserNoPay(uid) {
      axios.get("/api/stall/allNoPay?person=" + uid).then((res) => {
        this.dRes = res.data.data;
      });
    },
    getUserStallRes(uid) {
      axios.get("/api/stall/allRes?uid=" + uid).then((res) => {
        this.yRes = res.data.data;
      });
    },
    feeChange(stallRes) {
      let startTime = new Date(stallRes.createTime);
      let endTime = stallRes.overTime ? new Date(stallRes.overTime) : new Date();
      let hours = (endTime.getTime() - startTime.getTime()) / 3600000;
      return (Math.floor(hours * 10) / 10) * stallRes.stall.stallMoney;
    },
    getParkingDuration(stallRes) {
      let startTime = new Date(stallRes.createTime);
      let endTime = stallRes.overTime ? new Date(stallRes.overTime) : new Date();
      return this.formatDuration(startTime, endTime);
    },
    formatDuration(startTime, endTime) {
      let totalMs = endTime.getTime() - startTime.getTime();
      let totalSeconds = Math.floor(totalMs / 1000);
      let totalMinutes = Math.floor(totalSeconds / 60);
      let totalHours = Math.floor(totalMinutes / 60);

      let hours = totalHours;
      let minutes = totalMinutes % 60;
      let seconds = totalSeconds % 60;

      if (hours > 0) {
        return `${hours}小时${minutes}分${seconds}秒`;
      } else if (minutes > 0) {
        return `${minutes}分${seconds}秒`;
      } else {
        return `${seconds}秒`;
      }
    },
    getPaidRecords() {
      return this.allStallRes.filter(item => item.money != undefined && item.money != null);
    },
    formatPaymentTime(timeString) {
      if (!timeString) return '';
      return timeString.replace('T', ' ').split('.')[0];
    },
    toPay() {
      this.payMoney = "";
      this.payShow = true;
    },
    checkMoney() {
      if (typeof this.payMoney === "number") {
        this.msgShow = false;
        this.payMsg = "";
      } else {
        this.msgShow = true;
        this.payMsg = "请输入正确的金额数值";
      }
    },
    payClick() {
      if (typeof this.payMoney === "number") {
        const uid = window.sessionStorage.getItem("token");
        axios
            .post("/api/user/userPay", {
              uid: uid,
              money: this.payMoney,
            })
            .then((res) => {
              if (res.data.data) {
                this.$message.success("充值成功！");
                this.getUserInfo(uid);
                this.payClose();
              } else {
                this.$message.error("充值失败，请重新尝试");
              }
            });
      } else {
        this.$message.info("输入金额错误，充值失败！");
        this.payClose();
      }
    },
    payClose() {
      this.payShow = false;
      this.msgShow = false;
      this.payMsg = "";
    },
    async payStall(stallRes) {
      const re = await this.$confirm(
          "该次停车缴费" + this.feeChange(stallRes).toFixed(2) + "元",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).catch((err) => err);
      // console.log(re)
      if (re != "confirm") {
        this.$message.info("已取消停车缴费！");
      } else {
        let oa = {};
        oa.pid = stallRes.pid;
        oa.person = stallRes.person;
        oa.stallId = stallRes.stallId;
        oa.money = this.feeChange(stallRes);
        axios.post("/api/stall/payMoneyPerson", oa).then((res) => {
          if (res.data.data.flag) {
            this.$message.success("停车缴费成功！");
            this.getAllStallRes(this.userInfo.username);
            this.getUserNoPay(this.userInfo.username);
          } else {
            this.$message.error(res.data.data.msg);
          }
        });
      }
    },
  },

  mounted() {
    const uid = window.sessionStorage.getItem("token");
    this.getUserInfo(uid);
  },
};
</script>
<style scoped>
.top {
  height: 200px;
}
.top h2 {
  text-align: center;
  color: rgb(102, 102, 102);
}
.count {
  text-align: left;
  color: #e75c09;
}
.num {
  color: #ff4d4f;
  font-size: 34px;
}
.text {
  font-size: 20px;
}
.recharge-section {
  margin-top: 20px;
  text-align: left;
}

.pay-btn {
  font-size: 18px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
.bottom h2 {
  text-align: center;
  color: rgb(102, 102, 102);
}
.el-row {
  height: 50px;
}
.right h2 {
  text-align: center;
  font-size: 24px;
  color: rgb(107, 107, 107);
}
.pay-msg {
  color: red;
  font-size: 12px;
}
.stall-num {
  font-size: 16px;
}
.num-red {
  color: red;
}
.no-res {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  color: rgb(203, 199, 199);
  font-size: 24px;
}

.no-res-small {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 16px;
  margin: 20px 0;
}
.pending-amount {
  color: #ff4d4f;
  font-weight: bold;
  font-size: 18px;
}
.parking-duration {
  color: #409EFF;
  font-weight: bold;
  font-size: 16px;
}

/* 表格美化样式 */
.table-header {
  font-weight: 600;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px 0;
}

.header-cell {
  text-align: center;
  color: #333;
  font-weight: 600;
  padding: 8px 12px;
}

.table-row {
  margin-bottom: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.table-row:hover {
  background-color: #f8f9fa;
  border-radius: 6px;
}

.data-cell {
  text-align: center;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 统一数据字体样式 */
.area, .stall-num, .parking-duration, .payment-time, .money {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.area {
  color: #666;
}

.stall-num {
  color: #409EFF;
  font-weight: 600;
}

.payment-time {
  color: #666;
  font-size: 14px;
}

.money {
  color: #67C23A;
  font-weight: 600;
}

.pay-button {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .table-header, .table-row {
    font-size: 14px;
  }

  .data-cell {
    padding: 6px 8px;
  }

  .area, .stall-num, .parking-duration, .payment-time, .money {
    font-size: 14px;
  }
}
</style>
